<template>
  <div class="box">
    <div class="bar">
      <button @click="commentName='First'">1</button>
      <button @click="commentName='Second'">2</button>
      <button @click="commentName='Third'">3</button>
    </div>
    <div class="content">
      <keep-alive include="First,Third">
          <component :is="commentName"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
// import First from "@/components/First.vue";
// import Second from "@/components/Second.vue";
// import Third from "@/components/Third.vue";
export default {
  components: {
    First:()=>import('@/components/First.vue'),
    Second:()=>import('@/components/Second.vue'),
    Third:()=>import('@/components/Third.vue'),
  },
  data(){
    return{
      commentName:'First'
    }
  }
};
</script>

<style lang="scss">
    .box{
      display: flex;
      flex-direction: column;
      width: 500px;
      height: 300px;
      background-color: gray;
      .bar{
        display: flex;
        width: 100%;
        button{
          flex: 1;
          height: 35px;
          font-size: 18px;
        }
      }
      .content{
          flex: 1;
          background-color: yellow;
      } 
    }
</style>